<template>
    <div class="iframe">
        <div class="i-title">
            <h3>我的购物车</h3>
        </div>
        <div class="i-tip">
            <div class="item header">
                <span>商品名称</span>
                <span>价格</span>
                <span>数量</span>
                <span>操作</span>
            </div>
            <div class="item" v-for="item,index in cars" :key="index">
                <span>{{item.name}}</span>
                <span>{{item.price}}</span>
                <el-input type="number" class="w-50" min="1" max="10" v-model="item.num" />
                <span @click="del(index)">删除</span>
            </div>
            <div class="item">
                <span>总计：</span>
                <span></span>
                <span>{{comp.intNum}}</span>
                <span>{{comp.intTotal}}</span>
            </div>
        </div>
    </div>
</template>

<script>
    import {
        computed,
        reactive
    } from 'vue';
    export default {
        setup() {
            let cars = reactive([{
                    name: "手机",
                    price: 1000,
                    num: 1
                },
                {
                    name: "图片",
                    price: 100,
                    num: 1
                },
                {
                    name: "电脑",
                    price: 2000,
                    num: 1
                }
            ]);
            function del(i) {
                cars.splice(i, 1)
            }
            let comp = computed(() => {
                let intNum = 0,
                    intTotal = 0;
                cars.forEach(item => {
                    intNum += parseInt(item.num);
                    intTotal += parseInt(item.num) * item.price;
                })
                return {
                    intNum,
                    intTotal
                }
            })
            return {
                cars,
                comp,
                del
            }
        }
    }
</script>

<style scoped>
.w-50{
    width: 80px;
}
    .item {
        display: flex;
        width: 400px;
        padding: 8px 0;
        justify-content: space-around;
        border: solid 1px #ccc;
        margin-top: -1px;
    }
    .item span,
    .item input {
        width: 100px;
        text-align: center;
    }
    .header {
        background-color: #eee;
        font-weight: 700;
    }
</style>


